'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ToolCard } from "@/components/tool-card";
import { Content } from "@/types/content";
import { Category } from "@/types/category";

interface CategoryModalProps {
  isOpen: boolean;
  onClose: () => void;
  category: Category | null;
  contents: Content[];
}

export function CategoryModal({ isOpen, onClose, category, contents }: CategoryModalProps) {
  if (!category) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="!max-w-[60vw] !w-[60vw] max-h-[60vh] h-[60vh] overflow-hidden flex flex-col p-6">
        <DialogHeader className="flex-shrink-0 pb-4">
          <DialogTitle className="text-2xl font-semibold">
            {category.name} - 全部工具
          </DialogTitle>
        </DialogHeader>
        
        <div className="flex-1 overflow-y-auto pr-2">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-6">
            {contents.map(content => (
              <ToolCard 
                key={content.id} 
                id={content.id} 
                name={content.title} 
                summary={content.summary || ''}
                description={content.content || ''}
                icon={content.cover?.url || ''} 
                viewCount={content.viewCount} 
                favoritesCount={content.favoritesCount} 
              />
            ))}
          </div>
          
          {contents.length === 0 && (
            <div className="text-center py-16 text-muted-foreground">
              <div className="text-lg">暂无相关工具</div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}